Creating a Hello World Application in Flex

So let�s get you started by building your very first Flex Application. Assuming you�re not a newly born human or have recently crawled out from under a rock and have decided that learning Flex is the first thing that your heart desires, I�ll spare you the basic tour of the Flex interface.

There are two ways of creating a Flex Application:

1. Create a new Flex Project ( File | New | Flex Project )
2. Create a new Flex Application ( File | New | Flex Application )

Now, the simple difference should be obvious; a Flex Project can house all of the current projects assets � ActionScript, Images, .SWF Files, and even other Flex Applications. The Flex Application is kind of like the index.html inside of a website root folder. It is the base of your application and is what everything else if build around. I hope that makes sense.

For this tutorial, we�ll be creating a new Flex Project. Why? Well, the important thing to note here is that if you haven�t already created one, there is no place to create a singular Flex Application, or anything else for that matter. Thus, we�ll create a new project called �HelloWorld.�

When the �Create a Flex Project� dialog first appears, you can see that there are a few things to consider:

[ create a new Flex project first ]

First of all, you need to give the project a name, which we decided is going to be �HelloWorld� (without the quotes, of course). Now, I�m going to assume that you have a naming convention that you have learned and tend to stick with, and if you feel confident in your abilities, by all means, have at it. For the sake of consistency on my end, I always name a project capitalizing each word in the name, no spaces or special characters � you�ll notice that even if you try to use an unorthodox naming convention, it won�t let you.

Secondly, you are able to decide where your Flex project(s) will live. I use the default folder structure on my Mac, and in most cases, is automatically stored in your systems default �Documents� folder.

The �Application type� specifies whether or not you would like you Flex Application to run on the Web, or run as an Adobe AIR (desktop) application. For now, let�s just stick with �Web application� since it suites our needs at this time.

Lastly, you can choose to associate a Server technology such as ASP.NET, ColdFusion J2EE, PHP, or some Other server language. We�re not going to associate this little test project with any special languages, so just ignore that for now. I STRONGLY SUGGEST that you take the time to click that tiny little question mark at the bottom left of the dialog box and learn the more about your options when creating a new Flex Project. Don�t be shy, just do it� you�ll love it! Click �Finish� and we�re off.

Application
To add functionality to the application, let�s make sure we�re in the �Design� Mode. Once we�ve set up all of the visual components on the stage, we�ll make our way to the �Source� Mode so we can edit the code. Those buttons are located towards the top of the main stage of your application.

Once in Design Mode, to the lower left-hand corner there will be a Components Panel that houses all of the available Flex Components. Take a look through the available components and feel free to experiment with them once you�ve completed this basic tutorial. Let�s select a �Label� component and drag it to the stage. Go ahead and place it anywhere, but as you do, you�ll notice that Flex will automatically give you guide lines when you�re either close to a corner, or right smack-dap in the middle of the Stage. This is extremely useful when you�re trying to align your components within the Design Mode.
The purpose of the Label Component is to display a single line of text (i.e. header names, pages titles, etc). Once your Label is in place, there are two ways of editing it�s Text attribute. One way is to simple double-click on the component and edit it�s text right there. The second way directs us to the all-important Properties Panel. You�ll see that to the right hand side of the Flex IDE. There are a few things to note that are arranged within the �Common� sub-category of the Properties Panel:

[ your Properties panel ]

The �ID� field is the components identification, or for you Flash users, it�s like the Instance Name that you can give to any component with that available property. The �Text� field, in this case, is the visual text property that the Label component displays. Let�s set that to �Hello World!� Lastly, the �Enabled� option let�s you decide whether or not you would like your Label component to be enabled or disabled. In this specific case, all this really does it visually change the Label to a slightly greyed �disabled� look and feel. Once we preview the application, go ahead and change that property to �True� and you�ll see what I mean.
On that note, let�s preview our very first Flex Application. Towards the top of the Flex IDE, there are a series of buttons:

[ the Flex IDE toolbar buttons ]

Let�s concern ourselves with the second set of controls, the greenish ones. The fastest way to get familiar with everything in the Flex IDE, is to just hold your mouse over top of each icon and wait until the tool tip appears. The big green button is the �Run� button, this will compile your application and allow you to preview it just as anyone would within the browser. The little bug icon is just that � �Debug�. This is the button that you would want to press if you wanted to debug your project and find out more information as to why something isn�t working quite right or check your �trace� statements. That�s all fine and dandy, but for this application, let�s just stick to the �Run� button. Go ahead and click it and let�s see the magic happen. As you�ll notice, a couple of dialog boxes may shown themselves, and in that case, just tell Flex to automatically save your application if you so desire, and move on. The Flex Builder will compile your entire application and open a new browser window to display your Hello World Label in all of it�s glory:

[ a default, simple style ]

As was explained in my previous tutorial, Flex generates it�s own .SWF file, embeds it in an HTML file which is automatically named according to your application name (HelloWorld.html) and injects the appropriate JavaScript for browser Flash Player detection and all of that jazz.

What I want you to do now, is explore the properties panel and feel free to change the Label components Style properties. Give it a different font, or set it as Bold, and if you really want to go wild, you can click on the Stage and change it�s Style properties and you may even end up with something as freakishly stellar as this:

[ my really cool final output! ]

If you have any questions, feel free to post them on the kirupa.com Forums.

Devin Columbus aka dColumbus